<template>
	<view>
	    <view class="tabBarContainer">
	        <view class="content">
	            <view v-for="(item, idx) in tabBarList" :key="idx" @click="toPath(item)">
					<block v-if="idx===value">
						<view class="action-img">
							<w-image :src="item.iconActive" width="48" height="49" :isLoc="true"></w-image>
							<text class="line"></text>
						</view>
					</block>
					<block v-else>
						<w-icon :name="item.icon" :size="24"></w-icon>
						<text class="mt-2">{{ item.name }}</text>
					</block>
	            </view>
	        </view>
	    </view>
		<view style="width: 100%;height: 220rpx;"></view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String | Number,
				default: 0
			}
		},
		data() {
		    return {
		        tabBarList: [
		            { name: "首页", icon: "/static/tabBar/index.png", iconActive: "/static/tabBar/index2.png", path: "/pages/index/index" },
		            { name: "市场", icon: "/static/tabBar/market.png", iconActive: "/static/tabBar/market2.png", path: "/pages/market/market" },
		            { name: "我的", icon: "/static/tabBar/my.png", iconActive: "/static/tabBar/my2.png", path: "/pages/my/my"},
		        ],
		    };
		},
		methods: {
		    toPath(item) {
		        uni.switchTab({ url: item.path });
		    },
		},
	}
</script>

<style lang="scss" scoped>
	.tabBarContainer {
	    width: 100%;
	    height: auto;
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    z-index: 99;
		padding: 0 16rpx 60rpx;
		
		&:before{
			content: '';
			width: 100%;
			height: 80%;
			background-color: #fff;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: -1;
			opacity: .9;
		}
		
	    > .content {
	        width: 100%;
			height: 108rpx;
	        display: flex;
			background-color: #F5F5F5;
			border-radius: 80rpx;
			padding: 0 16rpx;
			
	        > view {
	            width: calc(100% / 3);
	            height: 108rpx;
	            display: flex;
	            flex-direction: column;
	            justify-content: center;
	            align-items: center;
	            font-size: 20rpx;
	            color: #666;
				position: relative;
				
				.action-img {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: -30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					.line{
						width: 24rpx;
						height: 4rpx;
						background: #EA1F15;
						border-radius: 26rpx;
					}
				}
	        }
	    }
	}
</style>